<template>
  <div>
    <div class="user-center">
      <div class="user-info clearfix por">
        <img class="avatar vam fl" :src="userInfo.icon">
        <div class="username">{{userInfo.nickname}}</div>
        <div class="age clearfix">
          <div v-if="userInfo.sex !== 3" :class="userInfo.sex === 2 ? 'girl' : userInfo.sex === 1 ? 'boy' : ''"
               class="sex vam fl" alt="">
          </div>
          <span v-else>{{userInfo.sex_cnn}}</span>
          <!--<span>{{// userInfo.birthday ? new Date().getFullYear() - new Date(userInfo.birthday * 1000).getFullYear() + '岁' : '未填写生日'}}</span>-->
        </div>
        <div class="edit abs-m" @click="editUser"></div>
      </div>
      <div class="device clearfix por lh1">
        <img src="../../images/center/device.png" alt="" class="fl vam ico">
        <div class="text">设备码</div>
        <div class="code">{{userInfo.uid}}</div>
        <div class="abs-m btn" @click="showDelBind">解绑</div>
      </div>
      <div class="operation-list">
        <div class="classify" v-for="(classify, ind) in operationList" :key="ind">
          <gl-item :value="operation.type" :name="operation.name" :icon="operation.icon"
                   v-for="(operation, i) in classify" :key="i"
                   @check="clickOperation"></gl-item>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapGetters, mapMutations} from 'vuex';

  export default {
    name: "Home",
    computed: {
      ...mapGetters(['userInfo', 'wxUserInfo'])
    },
    data() {
      return {
        operationList: [
          [
            {
              name: '关爱推送',
              icon: require('../../images/center/heart.png'),
              type: 'push',
            },
            {
              name: '手机绑定',
              icon: require('../../images/center/phone.png'),
              type: 'bindPhone',
            },
            {
              name: '学习进度',
              icon: require('../../images/center/rate.png'),
              type: 'rate',
            },
          ],
          [
            {
              name: '防沉迷设置',
              icon: require('../../images/center/setting.png'),
              type: 'config',
            }
          ],
        ],
      }
    },
    methods: {
      ...mapMutations(['setUserInfo']),
      editUser() {
        this.$router.push({
          name: 'EditUserInfo',
          params: {
            id: 'id'
          }
        });
      },
      showDelBind() {
        let _this = this;
        this.util.showPopup({
          content: '机器解绑后，查看不了任何\n学习记录了哦',
          sureText: '继续解绑',
          sure(close) {
            _this.util.login('').then(() => {
              close();
              _this.$toast.success('解绑成功');
              _this.util.checkOpenId();
            }).catch(err => {
              if (typeof err === 'string') return;
              _this.$err(err);
            });
          },
        });
      },
      clickOperation({icon, name, value}) {
        let params = {};
        let query = {};
        // switch (value) {
        //   case 'push':
        //     this.$toast('功能开发中，敬请期待！');
        //     return;
        //   default:
        // }
        this.$router.push({
          name: value.replace(/[a-z]?/i, e => e.toLocaleUpperCase()),
          params,
          query,
        });
      },

    },
    created() {
      // console.log(this.userInfo);
      // console.log(this.wxUserInfo);
      this.util.checkOpenId();
    },
  }
</script>

<style scoped lang="less">
  .user-center {
    > :nth-child(n) {
      &:not(:last-child) {
        background-color: #fff;
        margin-bottom: .63rem;
      }
    }
  }

  .operation-list {
    > :not(:last-child) {
      margin-bottom: .63rem;
    }
  }

  .classify {
    background-color: #fff;
    line-height: 3.75rem;
    font-size: 1rem;
    color: #333;
  }

  .user-info {
    padding: .94rem;
    line-height: 2rem;
    .avatar {
      margin-right: 1.25rem;
      width: 5rem;
      height: 5rem;
      border-radius: 50%;
    }
    .username {
      margin-top: .5rem;
      font-size: 1.19rem;
      color: #333;
    }
    .age {
      font-size: .88rem;
      color: #666;
    }
    .sex {
      margin: .45rem .56rem 0 0;
      width: 1rem;
      height: 1rem;
      background: url(../../images/center/boy.png) no-repeat top left / 100%;
      &.girl {
        background-image: url(../../images/center/girl.png);
        background-size: .75rem;
      }
    }
    .edit {
      right: 1.69rem;
      width: 1.06rem;
      height: 1.13rem;
      background: url(../../images/center/edit.png) no-repeat top left / 100%;
      &:hover {
        background-image: url(../../images/center/edit_pre.png);
      }
    }

  }

  .device {
    padding: .88rem .94rem .84rem;
    font-size: .94rem;
    color: #999;
    .ico {
      margin: .38rem .84rem 0 0;
      width: 1.69rem;
      height: 1.63rem;
    }
    .text {
      margin-bottom: .63rem;
      font-size: 1rem;
      color: #333;
    }
    .btn {
      right: .94rem;
      line-height: 1.63rem;
      padding: 0 .84rem;
      border-radius: 1rem;
      font-size: .78rem;
      color: #fff;
      background-color: #208fff;
    }
  }
</style>
